<template>
  <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="110px" size="small">
    <item-title title="基本信息" />
    <el-row :gutter="0" style="margin-left: 20px; margin-right: 20px">
      <el-col :lg="24" :xs="4">
        <el-form-item label="产品信息：">
          <el-link :underline="false" type="primary" @click="handlToProduct">
            {{ getProductName(formData?.productInfo) }}
          </el-link>
        </el-form-item>
      </el-col>

      <el-col :lg="8" :xs="4">
        <el-form-item label="终端名称 ：" style="width:100%">
          <el-link :underline="false" type="primary" @click="handlToTerina">
            {{ formData.terminalName}}
          </el-link>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="终端类型：">
          {{ getLabel('app_mode', formData.terminalType) }}
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="终端所在地区：">
          <span v-if=" formData.provinceName">{{ formData.provinceName }}/</span>
          <span v-if=" formData.cityName">{{ formData.cityName }}/</span> {{ formData.areaName }}
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="所在街道：" style="width: 100%">
          <span v-if="formData?.streetName"> {{formData?.streetName}}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>

      <el-col :lg="8" :xs="4">
        <el-form-item :label="formData.saleSource === '1' ?'客户下单日期：':'配送日期：'">
          {{ dateFormat("yyyy-mm-dd", formData.deliveryTime) }}
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="发货数量：">
          {{ formData.saleNum }}
          <span v-if="formData?.productInfo?.sellUnit ">
            {{ getLabel('sell_unit', formData?.productInfo?.sellUnit) }}
          </span>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4" v-if="formData.terminalPrice > 0">
        <el-form-item label="终端价：">
          <span v-if="formData.terminalPrice > 0">{{ isInteger(formData.terminalPrice) }}</span>
          <span v-if="formData?.productInfo?.sellUnit ">
            元 /{{ getLabel('sell_unit', formData?.productInfo?.sellUnit) }}
          </span>
        </el-form-item>
      </el-col>

      <el-col :lg="8" :xs="4">
        <el-form-item label="营销模式：">
          <div v-if="formData.sellMode !== 'direct'">
            <span v-if="formData.agentAttribute === '1' ">区域招商</span>
            <span v-if="formData.agentAttribute === '2' ">精细招商</span>
          </div>
          <div v-else> 终端直销</div>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="代理商名称：">
          <el-link :underline="false" type="primary" @click="handlToAgent"> {{ formData.agentName }}</el-link>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="交易价：">

          <span v-if="formData.tradePrice > 0">{{ isInteger(formData.tradePrice) }}</span>
          <span v-if="formData?.productInfo?.sellUnit ">
            元 /{{ getLabel('sell_unit', formData?.productInfo?.sellUnit) }}
          </span>

        </el-form-item>
      </el-col>

      <el-col :lg="8" :xs="4">
        <el-form-item label="负责营销职员：">
          {{ formData.headName }}
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="营销数据来源：">
          <span v-if="formData.saleSource === '1'">直发终端订单</span>
          <span v-if="formData.saleSource === '2'">商业流向记录</span>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item :label="formData.saleSource === '1' ? '关联单据编号：' :'关联流向编号：'">
          <el-link :underline="false" type="primary" @click="handlRelationNo">{{ formData.relationNo }}</el-link>
        </el-form-item>
      </el-col>

      <el-col :lg="8" :xs="4">
        <el-form-item label="记账日期：">
          {{ dateFormat("yyyy-mm-dd", formData.createdAt) }}
        </el-form-item>
      </el-col>

      <el-col v-if="formData.saleSource === '2'" :lg="8" :xs="4">
        <el-form-item label="配送商：">
          <span v-if="formData.saleSource === '1'">厂家配送</span>
          <el-link :underline="false" type="primary" @click="handlToDistributeName">
            <span v-if="formData.saleSource === '2'">{{ formData.distributeName }}</span>
          </el-link>
        </el-form-item>
      </el-col>
      <el-col v-if="formData.saleSource === '2'" :lg="8" :xs="4">
        <el-form-item label="配送费：">
          <div v-if="formData?.distributeDetailInfo?.computeMode==='固定价格'">
            <span>{{ formData?.distributeDetailInfo?.distributePrice }}元</span><span> /
              {{ getLabel('sell_unit', formData.sellUnit) }}</span>
          </div>
          <div v-if="formData?.distributeDetailInfo?.computeMode==='终端价百分比'">
            <span>{{ formData?.distributeDetailInfo?.distributePrice }}%</span><span>终端价</span>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <!--产品详情-->
  <detail-drawer ref="proDetailDrawer" custom-title>
    <template #title>
      {{ getProductName(formData?.productInfo) }}
    </template>
    <template #contents>
      <div class="drawer-content">
        <div class="history-list">
          <item-title title="基本信息" />
          <product-base-info v-if="formData.productId" :id="formData.productId" />
        </div>
        <div class="history-list">
          <item-title title="修改记录" />
          <operation-view :id="formData.productId" mode="product" />
        </div>
      </div>
    </template>
  </detail-drawer>
  <!--终端详情-->
  <detail-drawer ref="terminalRef" custom-title>
    <template #title>
      <span> {{ formData.terminalName }}</span>
    </template>
    <template #contents>
      <terminalName :id="formData.terminalId" />
    </template>

  </detail-drawer>
  <!--代理商详情-->
  <detail-drawer ref="agentRef" custom-title>
    <template #title>
      {{ formData?.agentName }}
    </template>
    <template #contents>
      <agentInfo :id="formData.agentId" />
    </template>
  </detail-drawer>
  <!--配送商详情-->
  <detail-drawer ref="distributeNameRef" custom-title>
    <template #title>
      {{ formData.distributeName }}
    </template>
    <template #contents>
      <distributorInfo :id="formData.distributeId" />
    </template>
  </detail-drawer>
  <!--关联订单编号-->
  <detail-drawer ref="orderInfoRef" custom-title>
    <template #title>
      {{ formData.relationNo }}
    </template>
    <template #contents>
      <orderInfo :id="formData?.relationId" />
    </template>
  </detail-drawer>
  <detail-drawer ref="businessFlowRef" custom-title>
    <template #title>
      {{ formData.relationNo }}
    </template>
    <template #contents>
      <businessFlow :id="formData?.relationId" />
    </template>
  </detail-drawer>
</template>

<script>
import {
  defineAsyncComponent,
  inject,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "Index",
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  components: {
    productBaseInfo: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/product/productBaseInfo.vue"
      )
    ),
    agentInfo: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/agent/agentInfo")
    ),
    terminalName: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/terminal/terminalInfo")
    ),
    distributorInfo: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/distributor/distributorInfo"
      )
    ),
    distributorServiceInfo: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/distributor/distributorServiceInfo"
      )
    ),
    orderInfo: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/order/OrderInfo.vue")
    ),
    businessFlow: defineAsyncComponent(() =>
      import("@CRM/views/commonView/businessFlow/index.vue")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    var data = reactive({
      formData: {},
      proDetailDrawer: null,
      terminalRef: null,
      agentRef: null,
      tradePriceRef: null,
      distributeNameRef: null,
      orderInfoRef: null,
      businessFlowRef: null,
    });

    // 获取详情
    const handlDetail = (id) => {
      api.sellDetail.TSELLDETAIL_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.saleDetail;
        }
      });
    };

    const handlToProduct = () => {
      data.proDetailDrawer.open();
    };

    const handlToTerina = () => {
      data.terminalRef.open();
    };

    const handlToAgent = () => {
      data.agentRef.open();
    };

    const handlTradePrice = () => {
      data.tradePriceRef.open();
    };

    const handlToDistributeName = () => {
      data.distributeNameRef.open();
    };

    const handlRelationNo = () => {
      if (data.formData?.saleSource === "1") {
        data.orderInfoRef.open();
      }
      if (data.formData?.saleSource === "2") {
        data.businessFlowRef.open();
      }
    };

    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          console.log(newval, "----------");
          handlDetail(newval);
        }
      },
      { immediate: true, deep: true }
    );

    onMounted((_) => {});
    return {
      ...toRefs(data),
      handlDetail,
      handlToProduct,
      handlToTerina,
      handlToAgent,
      handlTradePrice,
      handlToDistributeName,
      handlRelationNo,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
